import { inject, observer } from 'mobx-react'
import React from 'react'
import { Modal, Input, message, Button } from "antd";
import { withRouter } from "react-router-dom";
import QRCode  from 'qrcode.react';
import './index.scss';
import { bind, reset } from '@/api/index'
const { confirm } = Modal;
let milCToken = {}

const CheckBindModal = (props) => {
  const { isBind, secretObj, setCheckBindShow } = props;
  let code = ''
  const bindFn = () => {
    try {
      if (typeof milCToken.source === 'function') {
        milCToken.source('终止请求'); //取消请求
      }
	  if(!code){
		  message.warning('请输入谷歌验证码')
	  }else{
		bind({
		  code: code,
		  secret: secretObj.secret
		}).then((res)=>{
		  if(res.code === 1){
			  setCheckBindShow(false);
			  message.success("绑定成功")
		  }
		})  
	  }
    } catch (error) {
      console.log(error)
    }
  }
  
  const resetFn = () => {
    try {
      if (typeof milCToken.source === 'function') {
        milCToken.source('终止请求'); //取消请求
      }
	  confirm({
		content: '确认重置？',
		onOk() {
		  reset().then((res)=>{
			if(res.code === 1){
			  setCheckBindShow(false);
			  message.success("重置成功")
			}
		  })
		},
		onCancel() {},
	});
  	  
    } catch (error) {
      console.log(error)
    }
  }
  
  const onChange = (e) => {
	code = e.target.value;
  }
  
  return (
    <>
      <Modal 
		mask={true}
		centered={true}
		width={800}
		className="CheckBindModal"
		title="二次验证"
		visible={true}
		onCancel={()=>{setCheckBindShow(false)}}
		onOk={()=>{ isBind ? setCheckBindShow(false) : bindFn()}}
      >
		{
			isBind ?
			<div className="CheckBind">
				状态：已绑定 &nbsp;&nbsp;&nbsp;<Button type="primary" onClick={resetFn}>重置</Button>
			</div>
			:
			<div>
				<div className="line">
					<div className="left">步骤：</div>
					<div className="right step">
						1.下载安装Google认证器 （Authenticator）客户端。目前客户端有:android版|ios版。<br />
						2.然后选择“扫描条形码”。
					</div>
				</div>
				<div className="line">
					<div className="left">二维码：</div>
					<div className="right">
						<div className="step">3.扫描以下二维码，再输入下方二次验证码完成认证。</div>
						<div className="qrcode">
							<QRCode
							  value={secretObj.qrCode}
							  size={200}
							  fgColor="#000000"
							/>
							<div>{secretObj.secret}</div>
						</div>
					</div>
				</div>
				<div className="line">
					<div className="left">二次验证码：</div>
					<div className="right">
						<Input placeholder="请输入谷歌验证码" onChange={onChange} maxLength={10} />
					</div>
				</div>
			</div>
		}
      </Modal>
    </>
  );
};

export default withRouter(inject('store')(observer(CheckBindModal)));
